<template>
  <div class="container">
    <navigate>用户档案</navigate>
    <div class="card">
      <div
        class="item flex_row flex_align_center between"
        v-for="(item, index) in list"
        @click="$router.push(item.routerPath)"
        :key="index"
      >
        <div class="left flex_row flex_align_center">
          <div class="icon" :style="{ backgroundColor: item.bgColor }">
            <img :src="item.icon" alt="" />
          </div>
          <div class="info">
            <div class="label">{{ item.name }}</div>
            <div class="time">
              更新时间：{{
                item.up_time ? convertTimestampToDateTime(item.up_time) : "--"
              }}
            </div>
          </div>
        </div>
        <img class="right" src="@/assets/images/common/right.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { queryProfileUpdateTime } from "@/api/funcation/selfAssessment";
import { convertTimestampToDateTime } from "@/utils/time";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 档案列表
      // list: [
      //   {
      //     label: "基础资料",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/1.png"),
      //     bgColor: "#02aefd",
      //     routerPath: "/baseData",
      //   },
      //   {
      //     label: "健康情况",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/2.png"),
      //     bgColor: "#2acba6",
      //     routerPath: "/health",
      //   },
      //   {
      //     label: "教育情况",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/3.png"),
      //     bgColor: "#ff9500",
      //     routerPath: "/education",
      //   },
      //   {
      //     label: "残障等级",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/4.png"),
      //     bgColor: "#a4cb3b",
      //     routerPath: "/disability",
      //   },
      //   {
      //     label: "家庭情况",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/5.png"),
      //     bgColor: "#01cbfe",
      //     routerPath: "/family",
      //   },
      //   {
      //     label: "家庭访谈",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/6.png"),
      //     bgColor: "#01aefe",
      //     routerPath: "/familyInterview",
      //   },
      //   {
      //     label: "精神状态",
      //     updateTime: "2022-05-04",
      //     icon: require("@/assets/images/userRecord/7.png"),
      //     bgColor: "#2acba6",
      //     routerPath: "/mentalState",
      //   },
      // ],
      list: [],
    };
  },
  computed: {
    ...mapState(["INFO"]),
  },
  created() {
    this.getProfileUpdateTime();
  },
  methods: {
    convertTimestampToDateTime,
    async getProfileUpdateTime() {
      const iconMap = {
        1: require("@/assets/images/userRecord/1.png"),
        2: require("@/assets/images/userRecord/2.png"),
        3: require("@/assets/images/userRecord/3.png"),
        4: require("@/assets/images/userRecord/4.png"),
        5: require("@/assets/images/userRecord/5.png"),
        6: require("@/assets/images/userRecord/6.png"),
        7: require("@/assets/images/userRecord/7.png"),
      };
      const bgColorMap = {
        1: "#02aefd",
        2: "#2acba6",
        3: "#ff9500",
        4: "#a4cb3b",
        5: "#01cbfe",
        6: "#01aefe",
        7: "#2acba6",
      };
      const pathMap = {
        1: "/baseData", // 基本信息
        2: "/health", // 教育背景
        3: "/education", // 工作经历
        4: "/disability", // 家庭成员
        5: "/family", // 个人爱好
        6: "/familyInterview", // 个人特长
        7: "/mentalState", // 个人经历
      };
      let res = await queryProfileUpdateTime();
      if (res.code == 200) {
        this.list = res.data.map((item) => ({
          ...item,
          icon: iconMap[item.id], // 根据id匹配图标
          bgColor: bgColorMap[item.id], // 根据id匹配背景色
          routerPath: pathMap[item.id], // 根据id匹配路由路径
        }));
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
